import React, { memo, useEffect, useState } from 'react'
import { fetchPlayList } from '../../../../api/discover'
import ThemeCard from '../../../../components/themeCard'
import { themeMenuList } from '../../../../constans/discover'
import { getParamsImage } from '../../../../utils'
import './style.less'

const PlayList = () => {
  const [list, setList] = useState<any[]>([])
  useEffect(() => {
    fetchPlayList(8).then((res: any) => {
      if (res.result) {
        setList(res.result)
      }
    })
  }, [])
  return (
    <div className="play-list">
      <ThemeCard
        title="热门推荐"
        path="/discover/playlist"
        hasMore={true}
        content={themeMenuList}
      >
        <ul className="music-list">
          {list.length
            ? list.map((v) => (
                <li key={v.id} className="item">
                  <div className="image-wrap">
                    <img src={getParamsImage(v.picUrl)} alt="" />
                  </div>
                  <p className="hover-text desc">{v.name}</p>
                </li>
              ))
            : null}
        </ul>
      </ThemeCard>
    </div>
  )
}
export default memo(PlayList)
